<template>
	<!-- 卡片式2 -->
	<div class="swiper-container swiper-no-swiping swiper-card-h-theme2" :id="'theme2'+id" :style="{height: cardtheme2.height}"><!--112px-->
		<div class="swiper-wrapper">
			<div class="swiper-slide"  v-for='(val,i) in theme2Arr' :key="'ban'+i">
				<div class="swiper-slide-null" v-if="val.url" :style="{backgroundImage: 'url(' + val.url + ')'}"></div>
				<div class="swiper-slide-null" v-else></div>
			</div>
			<div class="swiper-slide" v-for="(item,idx) in nullArr" :key="idx">
				<div class="swiper-slide-null"></div>
			</div>
		</div>   
		<div class="swiper-pagination banner-num swiper-pagination-theme2" v-show="pagination"></div>
	</div>
</template>

<script>
import Swiper from 'swiper'
import 'swiper/dist/css/swiper.min.css'
export default {
	data(){
		return {
			swiper: null,//轮播
			nullArr: 0,
		}
	},
	props:{
		theme2Arr: Array,
		id: String,
		// multipleItem: String,
		cardtheme2: Object,
		pagination: Boolean
	},
	mounted(){ 
		this.newSwiper();
		this.findNull(this.theme2Arr);
	},
	destroyed(){
		this.swiper && this.swiper.destroy(false, false);
	},
	methods:{
		newSwiper(){
            this.$nextTick(()=>{
				this.swiper && this.swiper.destroy(false, false);
				let obj = {
					autoplay: {
						disableOnInteraction: false,
					},
					speed:3000,
					// centeredSlides: true,
					slidesPerView: 'auto',
					slidesPerView: this.cardtheme2.slidesPerView, //可视图片2张 //1.3  2.3
					spaceBetween: 10, //图片间距
					observer: true,//修改swiper自己或子元素时，自动初始化swiper
					observeParents: true,//修改swiper的父元素时，自动初始化swiper
					observeSlideChildren:true,
					// slidesOffsetBefore: 20,
					// slidesOffsetAfter: 20,
					watchSlidesVisibility: !0,
					lazyLoadingInPrevNext : true,//图片预先加载
					lazyLoadingInPrevNextAmount : 2,
					pagination: '#theme2'+this.id+' .swiper-pagination-theme2',
					paginationType: 'fraction',
					autoplayDisableOnInteraction:false,
					preventLinksPropagation:true
				}
				this.swiper = new Swiper ('#theme2'+this.id, obj);
				this.swiper.startAutoplay();
			})
		},
		update: function() {
			this.swiper && (this.swiper.update && this.swiper.update(), this.swiper.navigation && this.swiper.navigation.update(), this.swiper.pagination && this.swiper.pagination.render(), this.swiper.pagination && this.swiper.pagination.update())
		},
		findNull(arr){
			let nullArr = [];
			arr.find(value => {
				if (value != ""){
					nullArr.push(value);
			　　}
			})
			if(nullArr.length){	
				(this.cardtheme2.slidesPerView == 1.3 && nullArr.length <= 2) && (this.nullArr = 2-nullArr.length);
				(this.cardtheme2.slidesPerView == 2.3 && nullArr.length <= 3) && (this.nullArr = 3-nullArr.length);
				(this.cardtheme2.slidesPerView == 3.3 && nullArr.length <= 4) && (this.nullArr = 4-nullArr.length);
			}
		}
	},
	watch: {
		theme2Arr:{
			handler:function(val,old){
				this.findNull(this.theme2Arr);
				this.newSwiper();
			},
			deep:true
		},
		cardtheme2:{
			handler:function(val,old){
				this.findNull(this.theme2Arr);
				this.newSwiper();
			},
			deep:true
		}
	}
}
</script>
<style lang="less" scoped>
@import "../../../../../static/css/style.less";
@import "../../../../../static/css/element.less";
@import "../../../../../static/css/imgStyle.less";
</style>

